<template>
  <h1 v-if="listData.length == 0">搜索结果为空，正在努力补充内容中...</h1>
  <div class="container">
    <template v-for="(item, index) in listData">
      <ListItem :ArticleInfo="item" />
      <el-divider v-if="index != listData.length - 1" />
    </template>
  </div>
</template>

<script setup>
import ListItem from "@/components/ListItem.vue";
import { ref, watch } from "vue";
import { GetArticleList } from "@/api/request";
import router from "@/router";
import { useRoute } from "vue-router";

import { ElSkeleton, ElDivider } from "element-plus";
const route = useRoute();
const pageInfo = {
  pageIndex: 1,
  pageSize: 20,
};
const listData = ref([]);
watch(
  () => route.query.key,
  () => {
    getList(route.query.key);
  }
);
const getList = (keyword) => {
  const key = keyword || router.currentRoute.value.query.key;
  GetArticleList({ ...pageInfo, key }).then((res) => {
    listData.value = res.data;
  });
};
getList();
</script>

<style lang="less" scoped>
h1 {
  text-align: center;
  margin-top: 200px;
}
</style>
